<template>
  <div id="footer">
    <div id="up">
      <div class="w1200">
        <div class="left">
          <div class="tr" v-for="(item, i) in WebSiteArchitecture" :key="i">
            <div
              class="th"
              @click="
                gotopage(
                  (urls = item.urls),
                  (Markdowns = item.Markdowns),
                  (Picturelist = item.Picturelist),
                  (cards = item.cards),
                  (sort = item.sort)
                )
              "
            >
              {{ item.text }}
            </div>
            <div
              class="td"
              v-for="(items, j) in item.subMenus"
              :key="j"
              @click="
                gotopage(
                  (urls = items.urls),
                  (Markdowns = items.Markdowns),
                  (Picturelist = items.Picturelist),
                  (cards = items.cards),
                  (sort = items.sort)
                )
              "
            >
              {{ items.text }}
            </div>
          </div>
        </div>
        <!-- <div class="right">
					<div :class="item.class" v-for="(item, div) in QrCodeList" :key="div">
						<img :src="item.imgsrc" alt="" srcset="" />
						<span>{{ item.text }}</span>
					</div>
				</div> -->
      </div>
    </div>
    <div id="down">
      <div class="w1200">
        <span v-for="(item, index) in Copyright" :key="index">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import axios from 'axios'
import {PagesJump} from '@/utils'
export default {
  name: 'Footer',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {WebSiteArchitecture: [], QrCodeList: [], Copyright: []}
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    gotopage(urls, Markdowns, Picturelist, cards, sort) {
      PagesJump(urls, Markdowns, Picturelist, cards, sort)
    },
    getFooterInfo() {
      axios.get('/api/home').then(res => {
        this.QrCodeList = res.data.QrCodeList
        this.Copyright = res.data.Copyright
      }),
        axios.get('/api/WebSiteArchitecture').then(res => {
          res.data.WebSiteArchitecture.splice(3, 1)
          this.WebSiteArchitecture = res.data.WebSiteArchitecture
        })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getFooterInfo()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#footer {
  width: 100%;
  color: white;
  margin: 0 auto;
  #up {
    width: 100%;
    background-color: rgba(51, 51, 51, 1);
    .w1200 {
      padding: 50px 0;
      display: flex;
    }
    .left {
      flex-grow: 1;

      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .tr {
        width: 125px;
        float: left;
        margin: 0 0 16px 0;
        .th {
          font-size: 24px;
          line-height: 48px;
        }
        .td {
          font-size: 16px;
          line-height: 35px;
        }
      }
    }
    .right {
      width: 300px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .pcewm,
      .sjewm {
        width: 110px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: space-around;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          aspect-ratio: 1/1;
        }
        span {
          width: 100%;
          font-size: 20px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
  #down {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: black;
    .w1200 {
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      font-size: 14px;
      justify-content: space-between;
    }
  }
}
</style>
